<template>

    <div>
       <div v-show="active==1">
           <span style="margin-left: 500px;font-size: 30px">设备维修</span>

           <el-divider content-position="right"></el-divider>

           <div style="width: 600px">
               <span style="font-size:20px;color: red">基本信息</span>
               <el-form ref="form" :model="DeviceRepar" label-width="80px">
                   <el-form-item label="设备名称">
                       <el-input v-model="DeviceRepar.materialName" @focus="getMaterialName" readonly  ></el-input>
                   </el-form-item>
                   <el-form-item label="规格型号">
                       <el-input v-model="DeviceRepar.unitModel"  readonly="" ></el-input>
                   </el-form-item>
                   <el-form-item label="单位">
                       <el-input v-model="DeviceRepar.unit" readonly=""  ></el-input>
                   </el-form-item>
                   <el-form-item label="所属项目">
                       <el-input v-model="DeviceRepar.projectName" @focus="getPid" readonly ></el-input>
                   </el-form-item>
                   <el-form-item label="报修人">
                       <el-input v-model="DeviceRepar.name" @focus="getInspectId" readonly ></el-input>
                   </el-form-item>
                   <el-form-item label="部门">
                       <el-input v-model="DeviceRepar.deptName" readonly=""></el-input>
                   </el-form-item>
                   <el-form-item label="发生时间">
                       <el-col :span="11">
                           <el-date-picker type="date" placeholder="选择日期" v-model="DeviceRepar.fashengdate" style="width: 100%;" value-format="yyyy-MM-dd" ></el-date-picker>
                       </el-col>
                   </el-form-item>
                   <el-form-item label="故障程度">
                       <el-select v-model="DeviceRepar.chengdu" placeholder="请选择紧急程度">
                           <el-option label="轻微" value="轻微"></el-option>
                           <el-option label="一般" value="一般"></el-option>
                           <el-option label="严重" value="严重"></el-option>
                       </el-select>
                   </el-form-item>
                   <el-form-item label="预计维修费用">
                       <el-input v-model="DeviceRepar.money" type="number"></el-input>
                   </el-form-item>
                   <el-form-item label="希望恢复时间">
                       <el-col :span="11">
                           <el-date-picker type="date" placeholder="选择日期" v-model="DeviceRepar.huifudate" style="width: 100%;" value-format="yyyy-MM-dd" ></el-date-picker>
                       </el-col>
                   </el-form-item>
                   <el-form-item label="故障症状">
                       <el-input type="textarea" v-model="DeviceRepar.zhengzhuang"></el-input>
                   </el-form-item>
                   <el-form-item label="备注">
                       <el-input type="textarea" v-model="DeviceRepar.comment"></el-input>
                   </el-form-item>
                   <el-divider content-position="right"></el-divider>
                   <span style="font-size:20px;color: red">附件</span>
                   <el-container>
                       <el-form-item label="相关文件:">
                           <el-upload
                                   name="multipartfile"
                                   action="http://localhost/upload"
                                   :headers="{token:this.$store.state.token}"
                                   :data="{folder:'DeviceRepar'}"
                                   class="upload-demo"
                                   ref="upload"
                                   :limit="1"
                                   :multiple="false"
                                   :auto-upload="false"
                                   :on-success="handleUploadSuccess">
                               <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                               <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                           </el-upload>
                       </el-form-item>
                       <el-input v-model="DeviceRepar.files" v-show="false"></el-input>
                   </el-container>
                   <el-table
                           :data="enclosures"
                           border
                           style="width: 100%"
                           v-if="enclosureTab">
                       <el-table-column
                               fixed
                               prop="fileName"
                               label="文件名">
                       </el-table-column>
                       <el-table-column
                               prop="realName"
                               label="上传人">
                       </el-table-column>
                       <el-table-column
                               prop="time"
                               label="上传时间">
                       </el-table-column>
                       <el-table-column
                               fixed="right"
                               label="操作">
                           <template slot-scope="scope">
                               <el-button @click="selectEnclosure(scope.row)" type="text" size="small">查看</el-button>
                               <el-button @click="delEnclosure(scope.row)" type="text" size="small">删除</el-button>
                           </template>
                       </el-table-column>
                   </el-table>
                   <el-divider content-position="right"></el-divider>

                   <el-form-item>
                       <el-button type="primary" @click="save" style="margin-left: 600px" v-if="saveStatus">立即创建</el-button>
                       <el-button type="primary" @click="update" style="margin-left: 600px" v-if="updateStatus">修改</el-button>
                   </el-form-item>
               </el-form>

           </div>


           <el-dialog
                   title="项目名称"
                   :visible.sync="dialogVisible"
                   width="70%">
               <project-type-big-data v-on:row="row" v-if="dialogVisible" ></project-type-big-data>
           </el-dialog>

           <el-dialog
                   title="设备名称选择"
                   :visible.sync="dialogVisible2"
                   width="60%">
               <material-list-readly-one v-on:row="checked" v-if="dialogVisible2" ></material-list-readly-one>
           </el-dialog>
       </div>
        <el-dialog
                title="检查人"
                :visible.sync="dialogVisible3"
                width="70%">
            <emp-dept-post v-on:row="Inspectrow" v-if="dialogVisible3" ></emp-dept-post>
        </el-dialog>
       <div>
           <photo v-show="active==2" v-on:fh="Phonefh"  :phonePath="phonePath" ></photo>
       </div>

    </div>
</template>

<script>
    import EmpDeptPost from '../../../components/common/providerinfo/EmpDeptPost.vue'
    import ProjectTypeBigData from '../../common/projectInfo/ProjectInfoList.vue'
    import MaterialListReadlyOne from '../../common/material/MaterialListReadlyOne.vue'
    import Photo from '../modularOne/Photo.vue'

    import  DeviceReparService from '../../../model/mfy/DeviceReparService.js'
    const deviceReparService= DeviceReparService.getInstance();

    export default {
        name: "DeviceOilUsed",
        data(){
            return{
                active:1,
                DeviceRepar:{},
                dialogVisible:false,
                dialogVisible2:false,
                dialogVisible3:false,
                enclosures:[],//附件
                enclosureTab:false,
                phonePath:'',
                saveStatus:true,
                price:'',
                updateStatus:false,
                depts:[],
                attids:''
            }
        },
        methods:{
            getPid(){
                this.dialogVisible=true
            },
            row(row){
                this.dialogVisible=false
                this.DeviceRepar.projectName=row.projectName
                this.DeviceRepar.pId=row.id
            },
            getInspectId(){
                this.dialogVisible3=true;
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            Inspectrow(row){
                this.dialogVisible3=false
                this.DeviceRepar.name=row.name
                this.DeviceRepar.eid=row.id
                this.DeviceRepar.did=row.dept_id
                this.DeviceRepar.deptName=row.dept_name
            },
            checked(checkedRow){
                this.dialogVisible2=false
                this.DeviceRepar.materialId=checkedRow.id;
                this.DeviceRepar.materialName=checkedRow.materialName;
                this.DeviceRepar.unit=checkedRow.unit;
                this.DeviceRepar.unitModel=checkedRow.unitModel;
            },
            handleUploadSuccess(response,file){
                this.enclosureTab=true
                var enclosure ={};
                enclosure.fileName = file.name
                enclosure.filePath = response.data
                enclosure.time = this.datetime();
                enclosure.realName = sessionStorage.getItem("realName")
                this.enclosures.push(enclosure)
                this.DeviceRepar.filePath = response.data
            },
            selectEnclosure(row){
                this.phonePath=row.filePath
                this.active++
            },
            delEnclosure(row){
                this.enclosures.forEach(i=>{
                    if(i.time==row.time){
                        this.enclosures.pop();
                    }
                })
            },
            datetime(){
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth()+1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                var time = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
                return time;
            },
            Phonefh(){
                this.active--
            },
            getMaterialName(){
                this.price=''
                this.dialogVisible2=true
            },
            save(){
                var params={}
                params.enclosures=this.enclosures
                params.DeviceRepar=this.DeviceRepar
                deviceReparService.save(params).then(()=>{
                       this.$message.success("添加成功!");
                    this.$router.push({name:"devicereparmx"})
                })
            },
            update(){
                var params={}
                this.enclosures.forEach(i=>{
                    i.id=i.id+""
                })



                for(var i =0;i<this.enclosures.length;i++){
                    this.enclosures[i].id=this.attids.split(",")[i]
                }

                params.enclosures=this.enclosures
                params.DeviceRepar=this.DeviceRepar
                console.log(this.DeviceRepar);
                deviceReparService.update(params).then(()=>{
                    this.$message.success("修改成功!");
                    this.$router.push({name:"devicereparmx"})
                })


            }

        },
        created() {
        },
        watch : {
            '$route' (to, from) {
                if(from.path=='/devicereparmx' &&  this.$route.params.search[1].label=='修改'){
                    console.log(this.$route.params.search[0]);
                    this.saveStatus=false;
                    this.updateStatus=true;
                    this.DeviceRepar=this.$route.params.search[0]
                    this.DeviceRepar.pId=this.$route.params.search[0].pid
                    deviceReparService.selectEnclosures(this.$route.params.search[0].attachIds).then((response)=>{
                        this.attids = this.$route.params.search[0].attachIds;
                        this.enclosureTab=true;
                        response.data.data.forEach(i=>{
                             i.time=this.datetime(),
                             i.realName=sessionStorage.getItem("realName")
                        })
                        this.enclosures=response.data.data;
                    })
                }else{
                    this.DeviceRepar={}
                    this.enclosures=[]
                }
            }
        },
        components:{
            ProjectTypeBigData,
            Photo,
            MaterialListReadlyOne,
            EmpDeptPost
        }
    }
</script>

<style scoped>

</style>
